#bottomNavigationBar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 3rem;
  box-shadow: 0 0 0.3rem 0 var(--shadow-color);
  font-size: 1rem;
  background-color: var(--background-color-white);
  position: relative;
  animation: 0.3s ease-in-out forwards;
  animation-name: slideUp;

  li {
    fill: var(--bottom-navigation-bar-color);
    color: var(--bottom-navigation-bar-color);
    transition: 0.6s;

    > p {
      font-size: 70%;
    }
  }

  svg {
    width: 1rem;
    height: 1rem;
    margin: 0 auto 0.2rem;
    display: block;
  }

  .select {
    fill: var(--bottom-navigation-bar-select-color);
    color: var(--bottom-navigation-bar-select-color);
  }

  // 定义从下到上的动画
  @keyframes slideUp {
    from {
      position: fixed;
      opacity: 0;
      transform: translateY(3rem); // 从底部50px的位置开始
    }
    to {
      opacity: 1;
      transform: translateY(0); // 移动到顶部
    }
  }

  // 定义从上到下的动画
  @keyframes slideDown {
    from {
      position: fixed;
      opacity: 1;
      transform: translateY(0); // 从顶部开始
    }
    to {
      position: fixed;
      opacity: 0;
      transform: translateY(3rem); // 移动到底部50px的位置
      display: none;
    }
  }

}


.player-container {
  position: relative;
  top: 4rem;
  opacity: 0;
  height: 0;
  transition: 0.6s;
  background-color: #1e2567;
}

.isMusic {
  top: 0;
  height: auto;
  opacity: 1;
}

